<template>
  <view class="page">
    <uni-nav-bar
      title="兑换中心"
      left-icon="left"
      showMenuButtonWidth
      statusBar
      backgroundColor="#fff"
      :border="false"
      color="#333"
      @clickLeft="$tools.back"
    />
    <nav-tab
      :items="tabList"
      v-model="currentTab"
      @change="handleTabChange"
    />
    <view
      class="content"
      v-if="currentTab === 0"
    >
      <uni-easyinput
        v-model="exchangeCode"
        placeholder="请输入兑换码或口令"
        :inputBorder="false"
        primaryColor="#AAAAAA"
      />
      <button
        class="exchange-btn"
        :disabled="!exchangeCode"
      >
        兑换
      </button>
    </view>
    <view
      class="content"
      v-if="currentTab === 1"
    >
      <uni-easyinput
        v-model="giftCardCode"
        placeholder="输入兑换码"
        :inputBorder="false"
        primaryColor="#AAAAAA"
        suffixIcon="scan"
        clearable
      />
      <view class="tips">
        <view class="tips-title">兑换说明</view>
        <view class="tips-content">
          1.兑换码为16位字母与数字的组合；<br />
          2.输入正确兑换码后即可兑换；<br />
          3.兑换成功后，可在微信小程序内"我的"-"礼品卡"-"我的礼品 卡"中查看；<br />
          4.雪王礼品卡存在有效期，逾期自动失效，不补发不延期，请在有效期内及时使用。<br />
        </view>
        <view class="tips-title">使用说明</view>
        <view class="tips-content">
          1.兑换码仅限兑换雪王礼品卡，不可兑换现金/找零；<br />
          2.同一个兑换码仅限兑换一次，成功兑换后兑换码失效，不可重复兑换使用：<br />
          3.兑换成功后的雪王礼品卡不可退款和转赠：<br />
          4.雪王礼品卡具体使用规则请以"常见问题"为准<br />
        </view>
      </view>
      <view class="footer">
        <view
          class="footer-content"
          @tap="isAgree = !isAgree"
        >
          <uni-icons
            :type="isAgree ? 'checkbox-filled' : 'circle'"
            :color="isAgree ? '#E60012' : '#333333'"
            size="16"
          />
          <text>我已阅读并同意</text>
          <text class="text-primary">《礼品卡章程》</text>
        </view>
        <button
          class="exchange-btn"
          :disabled="!giftCardCode || !isAgree"
        >
          确认兑换
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Exchange",
  data() {
    return {
      tabList: ["兑换优惠券", "兑换礼品卡"],
      currentTab: 0,
      exchangeCode: "",
      giftCardCode: "",
      isAgree: false
    }
  },
  methods: {
    handleTabChange() {}
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.content {
  padding: $uni-spacing-row-xl;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-xl;
}

::v-deep {
  .uni-easyinput__content {
    background-color: #f4f4f7 !important;
    border-radius: $uni-border-radius-xl !important;
  }

  .uni-easyinput__content-input {
    height: 90rpx;
  }
}

.exchange-btn {
  width: 100%;
  height: 90rpx;
  background-color: $uni-color-primary;
  color: #fff;
  font-size: $uni-font-size-lg;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $uni-border-radius-xl;

  &[disabled] {
    background-color: #f8b3b8;
    color: #fff;
  }
}

.tips {
  display: flex;
  flex-direction: column;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  padding: 0 $uni-spacing-row-sm;

  &-title {
    font-size: $uni-font-size-base;
    color: $uni-text-color;
    font-weight: 500;
    margin: $uni-spacing-row-xxl 0 $uni-spacing-row-lg 0;
  }

  &-content {
    line-height: 1.5;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  z-index: 10;
  padding: $uni-spacing-row-base $uni-spacing-row-xl;

  &-content {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-base;
    margin-bottom: $uni-spacing-row-base;
  }
}
</style>
